<!--<!DOCTYPE html "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">-->
<div class="mdui-container" xmlns:th="http://www.thymeleaf.org" th:fragment="page(pageNum,pageSize,totalNum)">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdui/0.4.0/js/mdui.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdui/0.4.0/css/mdui.min.css" rel="stylesheet">
    <div class="mdui-row">
        <div class="mdui-col-xs-8 mdui-float-right mdui-valign">
            <div class="mdui-col-xs-4"><label>每页显示数量: </label></div>
            <div class="mdui-col-xs-2 pageSizeId">
                <select id="pageSizeId" class=" mdui-select" mdui-select="{position: 'bottom'}" name="pageSize">
                    <option value="12" th:if="${pageSize==12}" th:selected="selected">12</option>
                    <option value="12" th:unless="${pageSize==12}">12</option>
                    <option value="24" th:if="${pageSize==24}" th:selected="selected">24</option>
                    <option value="24" th:unless="${pageSize==24}" >24</option>
                    <option value="36" th:if="${pageSize==36}" th:selected="selected">36</option>
                    <option value="36" th:unless="${pageSize==36}" >36</option>
                    <option value="48" th:if="${pageSize==48}" th:selected="selected">48</option>
                    <option value="48" th:unless="${pageSize==48}">48</option>
                    <option value="96" th:if="${pageSize==96}" th:selected="selected">96</option>
                    <option value="96" th:unless="${pageSize==96}">96</option>
                </select>
            </div>
            <div class="mdui-col-xs-4"  th:inline="text">
                <input type="hidden" name="pageNum" id="pageNumId" th:value="${pageNum}"><!--当前第几页-->
                <input type="hidden" id="queryPageNum" th:value="${pageNum}" >
                [[${(pageNum-1)*pageSize+1}]]&nbsp;-&nbsp;[[${pageNum*pageSize>totalNum?totalNum:pageNum*pageSize}]] &nbsp;&nbsp;of&nbsp;&nbsp; [[${totalNum}]]
            </div>
            <div class="mdui-col-xs-2">
                <button type="button" onclick="queryPage(-1)"  class="mdui-btn" th:if="${pageNum!=1}"><i class="mdui-icon material-icons">&#xe5cb;</i></button>
                <button type="button"   class="mdui-btn" th:unless="${pageNum!=1}" disabled=""><i class="mdui-icon material-icons">&#xe5cb;</i></button>
            </div>
            <div class="mdui-col-xs-2" th:inline="text">
                <button type="button" onclick="queryPage(1)" class="mdui-btn" th:if="${(pageNum*pageSize-totalNum)<=0}"><i class="mdui-icon material-icons">&#xe5cc;</i></button>
                <button type="button"  class="mdui-btn" th:unless="${pageNum*pageSize<=totalNum}" disabled=""><i class="mdui-icon material-icons">&#xe5cc;</i></button>
            </div>
        </div>
        <script type="text/javascript" th:inline="javascript" >
            //            var inst = new mdui.Select('#pageSizeId');
            function queryPage(i) {
                $('#queryPageNum').val(parseInt($('#pageNumId').val())+parseInt(i));
                queryPageData();
            }
            $(function () {
                $(document).on('click', '.pageSizeId div.mdui-select .mdui-select-menu .mdui-select-menu-item', function () {
                    queryPageData();
                });
            });

        </script>
    </div>
</div>